<template>
  <!-- 面包屑 -->
  <el-rate v-model="value" clearable />
  <div class="hd">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首页</b></el-breadcrumb-item>
      <el-breadcrumb-item><b>航班状态查询</b></el-breadcrumb-item>
      <el-breadcrumb-item>航班属性查询</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索表单 -->
  <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
    <el-form-item label="航班状态" prop="flightstate">
      <el-select
          v-model="searchFormModel.flightstate"
          placeholder="航班状态"
          clearable >
        <el-option
            v-for="item in flightState"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="航班属性" prop="flighttype">
      <el-select
          v-model="searchFormModel.flighttype"
          placeholder="航班属性"
          clearable >
        <el-option
            v-for="item in flightType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="searchOnSubmit">查询</el-button>
      <el-button @click="searchOnReset">取消</el-button>
    </el-form-item>
  </el-form>


  <!-- 数据表格 -->

  <el-table :data="tableFlight" stripe border style="width: 100%">
    <el-table-column prop="FLID" label="航班号" width="100" />
    <el-table-column prop="FRTT" label="始发时间" width="200" />
    <el-table-column prop="FRLT" label="抵达时间" width="200"/>
    <el-table-column prop="FFID" label="航班标识日期" width="200"/>
    <el-table-column prop="FIDE" label="航班标识时间" width="200"/>
    <el-table-column prop="startaddress" label="始发地" width="100" />
    <el-table-column prop="CNNM" label="目的地" width="100" />
    <el-table-column prop="FATT" label="属性" width="70" />
    <el-table-column prop="ISTA" label="状态" width="70" />
  </el-table>
<div class="pg">
  <div class="example-pagination-block">
    <el-pagination layout="prev, pager, next" :total="500" />
  </div>
</div>
</template>

<script setup>
import {Edit , Delete , Plus} from "@element-plus/icons";
import {onMounted, reactive, ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'


onMounted(()=>{

})

// 搜索表单相关
const searchFormRef = ref()
const searchFormModel = reactive({

})
const searchOnSubmit = ()=>{  }
const searchOnReset = ()=> {
  searchFormRef.value.resetFields()
}
// 航班状态
const flightState = [
  {label : '全部' , value : 1}
  ,{label : 'ONR' , value : 2}
  ,{label : 'ARR' , value : 3}
  ,{label : 'CKI' , value : 4}
  ,{label : 'CKO' , value : 5}
  ,{label : 'BOR' , value : 6}
  ,{label : 'TBR' , value : 7}
  ,{label : 'LBD' , value : 8}
  ,{label : 'POK' , value : 9}
  ,{label : 'DEP' , value : 10}
  ,{label : '其他' , value : 11}
]
// 航班属性
const flightType = [
  {label : '国内' , value : 2403}
  ,{label : '国际' , value : 2401}
  ,{label : '混合' , value : 2404}
  ,{label : '地区' , value : 2402}

]


</script>

<style scoped>
.hd{
  padding-top: 3px;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;

}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}


/* 面包屑样式 */
.el-breadcrumb {
  margin-left: 20px; /* 根据需要调整这个值 */
  margin-right: 50px; /* 根据需要调整这个值 */
  margin-top: 20px; /* 垂直边距，如果需要 */
}

/* 搜索表单样式 */
.demo-form-inline {
  margin-left: 20px; /* 根据需要调整这个值 */
  margin-right: 10px; /* 根据需要调整这个值 */
  margin-top: 40px; /* 垂直边距，如果需要 */
}

/* 其他样式 */
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}
.el-table {
  padding-left: 10px; /* 根据需要调整这个值 */
}

.pagination button {
  padding: 8px 16px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  cursor: pointer;
}
.pagination button.active {
  background-color: #4680b2;
  color: white;
  border-color: #3685c7;
}
.pg{
  padding-left: 450px;
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;

}
/* 更多样式... */
</style>